<template>
    <div class="p-4">
        <ChartGroupCard class="enter-y" :loading="loading" type="bdc"/>
        <BdcTabCard class="!my-4 enter-y" :loading="loading"/>
        <a-row>
            <a-col :span="24">
                <a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false">

                    <a-tabs v-model:activeKey="indexBottomTab" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
                        <template #tabBarExtraContent>
                            <div class="extra-wrapper">
                                <a-radio-group v-model:value="indexRegisterType" @change="changeRegisterType">
                                    <a-radio-button value="转移登记">转移登记</a-radio-button>
                                    <a-radio-button value="抵押登记">抵押登记</a-radio-button>
                                    <a-radio-button value="">所有</a-radio-button>
                                </a-radio-group>
                            </div>
                        </template>

                        <a-tab-pane tab="业务流程限时监管" key="1">
                            <a-table :dataSource="dataSource" size="default" rowKey="reBizCode" :columns="table.columns" :pagination="ipagination" @change="tableChange">
                                <template #flowRate="{text, record, index}">
                                    <Progress :strokeColor="getPercentColor(record.flowRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.flowRate)" style="width: 80px"/>
                                </template>
                            </a-table>
                        </a-tab-pane>

                        <a-tab-pane loading="true" tab="业务节点限时监管" key="2">
                            <a-table :dataSource="dataSource1" size="default" rowKey="reBizCode" :columns="table1.columns" :pagination="ipagination1" @change="tableChange1">
                                <template #flowRate="{text, record, index}">
                                    <span style="color: red;">{{ record.flowRate }}小时</span>
                                </template>
                            </a-table>
                        </a-tab-pane>

                    </a-tabs>

                </a-card>
            </a-col>
        </a-row>
    </div>
</template>
<script lang="ts" setup>
    import {ref, unref} from 'vue';
    import {Progress} from 'ant-design-vue';
    import ChartGroupCard from '../components/ChartGroupCard.vue';
    import BdcTabCard from '../components/BdcTabCard.vue';
    import LineMulti from '/@/components/chart/LineMulti.vue';
    import HeadInfo from '/@/components/chart/HeadInfo.vue';
    import {table, table1} from '../data';

    const loading = ref(true);

    setTimeout(() => {
        loading.value = false;
    }, 500);


    const indexBottomTab = ref('1')
    const indexRegisterType = ref('转移登记')
    const dataSource = ref([])
    const dataSource1 = ref([])
    const ipagination = ref(table.ipagination)
    const ipagination1 = ref(table1.ipagination)

    function changeRegisterType(e) {
        indexRegisterType.value = e.target.value
        if (unref(indexBottomTab) == '1') {
            loadDataSource()
        } else {
            loadDataSource1()
        }
    }

    function tableChange(pagination) {
        ipagination.value.current = pagination.current
        ipagination.value.pageSize = pagination.pageSize
        loadDataSource()
    }

    function tableChange1(pagination) {
        ipagination1.value.current = pagination.current
        ipagination1.value.pageSize = pagination.pageSize
        loadDataSource1()
    }

    function getFlowRateNumber(value) {
        return +value
    }

    function getPercentFormat(value) {
        if (value == 100) {
            return "超时"
        } else {
            return value + "%"
        }
    }

    function getPercentColor(value) {
        let p = +value
        if (p >= 90 && p < 100) {
            return 'rgb(244, 240, 89)'
        } else if (p >= 100) {
            return 'red'
        } else {
            return 'rgb(16, 142, 233)'
        }
    }

    function loadDataSource() {
        dataSource.value = table.dataSource.filter(item => {
            if (!unref(indexRegisterType)) {
                return true
            }
            return item.type == unref(indexRegisterType)
        })
    }

    function loadDataSource1() {
        dataSource1.value = table1.dataSource.filter(item => {
            if (!unref(indexRegisterType)) {
                return true
            }
            return item.type == unref(indexRegisterType)
        })
    }

    loadDataSource()
    loadDataSource1()
</script>

<style lang="less" scoped>
    .extra-wrapper {
        line-height: 55px;
        padding-right: 24px;

        .extra-item {
            display: inline-block;
            margin-right: 24px;

            a {
                margin-left: 24px;
            }
        }
    }

    .item-group {
        padding: 20px 0 8px 24px;
        font-size: 0;

        a {
            color: rgba(0, 0, 0, 0.65);
            display: inline-block;
            font-size: 14px;
            margin-bottom: 13px;
            width: 25%;
        }
    }

    .item-group {

        .more-btn {
            margin-bottom: 13px;
            text-align: center;
        }
    }

    .list-content-item {
        color: rgba(0, 0, 0, .45);
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        margin-left: 40px;
    }

    @media only screen and (min-width: 1600px) {
        .list-content-item {
            margin-left: 60px;
        }
    }

    @media only screen and (max-width: 1300px) {
        .list-content-item {
            margin-left: 20px;
        }

        .width-hidden4 {
            display: none
        }
    }

    .list-content-item {
        span {
            line-height: 20px;
        }
    }

    .list-content-item {
        p {
            margin-top: 4px;
            margin-bottom: 0;
            line-height: 22px;
        }
    }

    .anty-list-cust {
        .ant-list-item-meta {
            flex: 0.3 !important;
        }
    }

    .anty-list-cust {
        .ant-list-item-content {
            flex: 1 !important;
            justify-content: flex-start !important;
            margin-left: 20px;
        }
    }
</style>
